%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%  Copyright by Wenliang Du.                                        %%
%%  This work is licensed under the Creative Commons                 %%
%%  Attribution-NonCommercial-ShareAlike 4.0 International License.  %%
%%  To view a copy of this license, visit                            %%
%%  http://creativecommons.org/licenses/by-nc-sa/4.0/.               %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\newcommand{\devtoolFigs}{../Web_Common/Figs}


% -------------------------------------------
% SUBSECTION
% ------------------------------------------- 
\subsection{使用 HTTP Header Live 插件检查HTTP头}
\label{web:sec:httpheaderlive}

在我们的Ubuntu 16.04虚拟机中，Firefox（版本60）不支持之前的 LiveHTTPHeader 插件。取而代之的是，我们使用了一个名为 HTTP Header Live 的新插件。启用和使用此工具的方法如图\ref{web:fig:httpheader}所示，只需点击标记为$\ding{192}$的图标，在左侧会弹出侧边栏。确保在位置$\ding{193}$选择 HTTP Header Live。然后点击网页中的任何链接，触发的所有HTTP请求都将被捕获并在侧边栏区域（标号$\ding{194}$）中显示。如果单击任何HTTP请求，将弹出一个窗口以显示所选的HTTP请求。不幸的是，在该插件中仍存在一个缺陷；除非改变窗口大小，否则弹出窗口内没有任何内容显示。似乎在窗口弹出时不会自动重绘，但更改其大小会触发重绘。

\begin{figure}[htb]
\begin{center}
\includegraphics[width=0.85\textwidth]{\devtoolFigs/HTTPHeaderLive.pdf}
\end{center}
\caption{启用 HTTP Header Live 插件}
\label{web:fig:httpheader}
\end{figure}

% -------------------------------------------
% SUBSECTION
% ------------------------------------------- 
\subsection{使用Web开发者工具检查HTTP头}
\label{web:sec:web_dev_tools}

Firefox还提供了一个非常有用的工具，可以用来检查 HTTP 头。这个工具是 Web Developer Network Tool。在本节中，我们将介绍该工具的一些重要功能。启用此网络工具的方法如下：

\begin{lstlisting}
点击 Firefox 右上角菜单 --> Web Developer --> Network
或
点击 Tools 菜单 --> Web Developer --> Network
\end{lstlisting}

以Elgg的用户登录页面为例，图\ref{fig:webdevtools_01_request}显示了网络工具中用于登录的HTTP POST请求。

\begin{figure}[htb]
\begin{center}
\includegraphics[width=0.8\textwidth]{\devtoolFigs/webdevtools_01_request.png}
\end{center}
\caption{Web开发者网络工具中的HTTP请求}
\label{fig:webdevtools_01_request}
\end{figure}

要查看更多详细信息，可以点击特定的HTTP请求，此时该工具会在两个分栏中显示相关信息（见图\ref{fig:webdevtools_02_two_panes})。

\begin{figure}[htb]
\begin{center}
	\includegraphics[width=0.95\textwidth]{\devtoolFigs/webdevtools_02_two_panes.png}
\end{center}
\caption{分栏中的HTTP请求和详细信息}
\label{fig:webdevtools_02_two_panes}
\end{figure}

所选请求的详细信息将显示在右侧分栏中。图\ref{fig:webdevtools_03_post_headers}展示了登录请求在 Headers 标签页中的详细信息（包括URL、请求方法和cookie）。可以观察到右分栏中包含的请求头和响应头。要检查HTTP请求中的参数，可以使用 Params 标签页。图\ref{fig:webdevtools_03_post_params}展示了登录请求发送给Elgg的参数，其中包括 username 和 password。该工具也可以像处理HTTP POST请求一样来检查HTTP GET请求。

\begin{figure}[htb]
 \centering
 \subfigure[HTTP请求头]{
        \includegraphics[width=0.6\textwidth]{\devtoolFigs/webdevtools_03-1.png}
        \label{fig:webdevtools_03_post_headers}
 }
 \subfigure[HTTP请求参数]{
        \includegraphics[width=0.35\textwidth]{\devtoolFigs/webdevtools_03-2.png}
        \label{fig:webdevtools_03_post_params}
 }
 \caption{HTTP头和参数}
\end{figure}

\paragraph{字体大小。} Web开发者工具窗口的默认字体大小较小，可以通过在网络工具窗口中任意位置点击一次，然后使用 \texttt{Ctrl} \texttt{+} 键来增大。

% -------------------------------------------
% SUBSECTION
% -------------------------------------------
\subsection{JavaScript调试}
\label{web:sec:jsdebugging}

我们可能还需要调试我们的JavaScript代码。Firefox的开发者工具也可以帮助调试JavaScript代码。它可以指出错误发生的具体位置。下面的指令显示了如何启用此调试工具：

\begin{lstlisting}
点击 Tools 菜单 --> Web Developer --> Web Console
或使用 Shift+Ctrl+K 快捷键。
\end{lstlisting}

进入控制台（Console）后，点击 JS 标签页。点击 JS 旁边的下箭头并确保在 Error 旁边有一个对勾。如果你对警告消息还感兴趣的话，则可以单击 Warning（见图\ref{devtool:fig:errocheckmark}）。

\begin{figure}[htb]
\begin{center}
  \includegraphics[width=0.4\textwidth]{\devtoolFigs/errorCheckMark.png}
\end{center}
\caption{调试JavaScript代码（1）}
\label{devtool:fig:errocheckmark}
\end{figure}

如果代码中出现任何错误，控制台将显示一条消息。导致错误的行号出现在错误消息右侧，点击行号即可跳转到具体出错位置（见图\ref{devtool:fig:console}）。

\begin{figure}[htb]
\begin{center}
  \includegraphics[width=1.0\textwidth]{\devtoolFigs/consoleError2.png}
\end{center}
\caption{调试JavaScript代码（2）}
\label{devtool:fig:console}
\end{figure}